@use '../colors.scss' as colors;
@use './dark-base.scss' as dark-base;

$base-hue: dark-base.$base-hue;
$base-saturation: dark-base.$base-saturation;

$elevations: (
  'sunken-1': hsl($base-hue, $base-saturation, 10%),
  'base': hsl($base-hue, $base-saturation, 15%),
  'raised-1': hsl($base-hue, $base-saturation, 20%),
  'raised-2': hsl($base-hue, $base-saturation, 25%),
  'raised-3': hsl($base-hue, $base-saturation, 30%),
);

$interactive-components: (
  'control': hsl($base-hue, $base-saturation, 10%),
  'input': hsl($base-hue, $base-saturation, 30%),
);

$common-state-deltas: (
  'hover': 0 0 6,
  'active': 0 0 14,
  'focused': 0 0 10,
  'disabled': 0 0 6,
  'muted': 0 0 6,
);

$components: (
  'row': hsl($base-hue, $base-saturation, 12%),
  'grid': hsl($base-hue, $base-saturation, 15%),
  'divider': hsl($base-hue, $base-saturation, 20%),
  'header': hsl($base-hue, $base-saturation, 20%),
  'supporting': hsl($base-hue, $base-saturation, 25%),
  'group': hsl($base-hue, $base-saturation, 25%),
  'section': hsl($base-hue, $base-saturation, 30%),
  'token': hsl($base-hue, $base-saturation, 40%),
);

$contextual: (
  'success': hsl(hue(colors.$success), 25%, 20%),
  'warning': hsl(hue(colors.$warning), 40%, 20%),
  'danger': hsl(hue(colors.$danger), 60%, 20%),
  'info': hsl(hue(colors.$info), 35%, 20%),
  'help': hsl(hue(colors.$help), 30%, 10%),
  'tip': hsl(hue(colors.$tip), 20%, 20%),
  'outcome': hsl(hue(colors.$outcome), 20%, 20%),
);

$contextual-state-deltas: (
  'hover': 0 6 6,
  'active': 0 2 10,
  'focused': 5 5 3,
  'disabled': 0 0 -20,
  'muted': 0 0 -10,
);

$exports: (
  'stateless': (
    $components,
  ),
  'stateful': (
    ($elevations, $common-state-deltas),
    ($interactive-components, $common-state-deltas),
    ($contextual, $contextual-state-deltas),
  ),
);
